<template>
  <div class='deviceShadow'>
    <div style="margin-top:10px">
      <el-table :data="tableData" :span-method="arraySpanMethod" style="width: 100%" fit border stripe size="mini" highlight-current-row :header-cell-style="{background:'#e5e5e5',color:'#000'}">
        <el-table-column prop="name" label="服务名称">
        </el-table-column>
        <el-table-column prop="auth" label="属性名称">
        </el-table-column>
        <el-table-column prop="type" label="上报值">
        </el-table-column>
        <el-table-column prop="remark" label="上报时间">
        </el-table-column>
      </el-table>
      <div style="text-align:right">
        <pagination v-show="pagination.total>0" :limit.sync="pagination.pageSize" :page.sync="pagination.page" :total="pagination.total" @pagination="getPageList" />
      </div>
    </div>

  </div>
</template>

<script>

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      tableData: [{ id: 11, name: "dlong", auth: "1232" }, { id: 11, name: "dlong", auth: "1232" }, { id: 31, name: "dlong2", auth: "1232" }],
      pagination: {
        total: 1,
        page: 1,
        pageSize: 10
      },
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() { },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    getPageList() {
      this.search()
    },
    search() {
      const p = Object.assign({}, this.pagination)
      // api.page(p).then(resp => {
      //   this.tableData = resp.data.list
      //   this.pagination = resp.data.pagination
      //   this.pagination.page = resp.data.pagination.current
      // })
    },
  },
}
</script>
<style lang='scss' scoped>
.deviceShadow {
  padding: 10px;
}
</style>